<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<style>
    .el-input--small .el-input__inner {
        height: 25px;
        line-height: 32px;
    }

    .el-button--small, .el-button--small.is-round {
        padding: 5px 10px;
    }
</style>
<body>
<div id="app">
    <el-container v-loading="loading">
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">合作商管理</el-breadcrumb-item>
                <el-breadcrumb-item>价目表列表</el-breadcrumb-item>
                <el-breadcrumb-item>价目表变更</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form label-width="120px">
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="基本信息" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                </el-row>
                <br>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="价目表编号">
                            <el-input :disabled="true" v-model="tariff.code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="价目表名称">
                            <el-input v-model="tariff.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="价目表变更名称">
                            <el-input v-model="chgSmyName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="备注">
                            <el-input v-model="remark" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="SKU清单" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="6" :sm="6" :md="4" :lg="2" :xl="2">
                        <el-button type="primary" style="margin-top: 12px;" @click="importSku">导入sku<i
                                class="el-icon-upload el-icon--right"></i></el-button>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                        <el-input placeholder="请输入内容" v-model="keySearch"
                                  style="width: 100%;margin-top: 12px">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>

                </el-row>
                <el-table :data="tables.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                          class="tb-edit" style="width: 100%" highlight-current-row
                          size="mini" tooltip-effect="dark" border height="calc(100vh - 468px)"
                          v-loading="tableLoading">
                    <el-table-column label="序号"
                                     width="50">
                        <template scope="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="材料编码" prop="sku_code" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column label="材料名称" prop="sku_name" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column label="品牌" prop="sku_brand" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column label="单位" prop="sku_unit" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column label="规格参数" prop="sku_slug_set" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column label="型号" prop="sku_model" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column label="变更原因" prop="reason" :show-overflow-tooltip=true>
                        <template scope="scope">
                            <el-input size="small" v-model="scope.row.reason" placeholder="请输入变更原因"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="销售价格" prop="sku_contract_price">
                        <template scope="scope">

                            <el-input-number size="mini" :disabled="scope.row.disable"
                                             v-model="scope.row.sku_contract_price" :precision="2"
                                             :step="0.1" :min="0.00"
                                             @change="handleEdit(scope.$index+(currentPage - 1) * pageSize, scope.row)"></el-input-number>

                        <#--<el-input size="small" :disabled="scope.row.disable"-->

                        <#--v-model="scope.row.sku_contract_price" placeholder="请输入价格"-->
                        <#--@keydown.native="inputLimit"></el-input>-->
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="70">
                        <template scope="scope">
                            <el-button size="small" type="danger" v-if="scope.row.isAdd"
                                       @click="handleDelete(scope.$index+(currentPage - 1) * pageSize, scope.row)">删除
                            </el-button>
                            <el-button size="small" type="danger" v-if="!scope.row.isAdd" :disabled="scope.row.disable"
                                       @click="handleCancel(scope.$index+(currentPage - 1) * pageSize, scope.row)">下架
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :page-sizes="[100, 500, 1000]"
                                       :current-page="currentPage"
                                       :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                                       :total="tables.length">
                        </el-pagination>
                    </el-col>
                </el-row>
                <br>

                <el-row>
                    <el-button type="primary" @click="submit">提交</el-button>
                    <a href="/tariffController/list.page">
                        <el-button>返回</el-button>
                    </a>
                </el-row>
            </el-form>
        </el-main>
        <el-dialog title="请选择SKU" :visible.sync="dialogFormVisible" width="90%" :fullscreen="true">
            <el-input v-model="dialog.keySearch" placeholder="请输入搜索内容" style="width:50%">
                <el-button slot="append" icon="el-icon-search" @click=dialogSearch></el-button>
            </el-input>
            <el-table v-loading="dialogLoading" ref="multipleTable" :data="dialog.tableData" tooltip-effect="dark"
                      style="width: 100%"
                      @selection-change="handleSelectionChange" size="mini" height="calc(100vh - 240px)">
                <el-table-column type="selection" width="55">
                <#--:selectable='selectable'-->
                </el-table-column>
                <el-table-column label="序号"
                                 type="index"
                                 width="50">
                </el-table-column>
                <el-table-column prop="sku_name" label="材料名称" :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column prop="sku_code" label="材料编码" :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column prop="sku_brand" label="品牌" max-width="50">
                </el-table-column>
                <el-table-column prop="sku_unit" label="单位" max-width="50">
                </el-table-column>
                <el-table-column prop="sku_slug_set" label="规格参数" :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column prop="sku_official_price" label="官方价格" max-width="100">
                </el-table-column>
            </el-table>
            <el-pagination @size-change="SizeChange" @current-change="currentChange" :page-sizes="[100, 500, 1000]"
                           :page-size="dialog.pageSize" layout="total, sizes, prev, pager, next, jumper"
                           :total="dialog.totalRecords">
            </el-pagination>
            <el-row>
                <el-button type="primary" @click="checkOK">确定</el-button>
                <el-button @click="checkCancel">取消</el-button>
            </el-row>
        </el-dialog>
    </el-container>
</div>

<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    //限制最多输入两位小数
    let inputLimit = function (e) {
        let num = e.target.value || ''
        let code = e.which || e.keyCode
        let str = (e.key && e.key != 'Unidentified') ? e.key : num.substr(num.length - 1)
        //无论任何情况，皆可执行
        if (code == '8') {
            return true
        }
        //没有满足任何一种情况，中断执行
        if (!(/[\d.]/.test(str) || code == '190')) {
            e.returnValue = false
            return false
        }
        if (num.length > 12 ||
                (num.indexOf('.') >= 0 && code == '190') ||
                ((num.indexOf('.') == num.length - 3) && num.length > 3) ||
                (num.length == 0 && code == '190')) {
            e.returnValue = false
            return false
        }
        return true

    }
    new Vue({
        el: '#app',
        data() {
            return {
                tableLoading: false,
                dialogFormVisible: false,
                dialogLoading: false,
                loading: false,
                chgSmyCode: '',
                chgSmyName: '',
                remark: '',
                tariff: {
                    id: '',
                    name: '',
                    code: '',
                },
                multipleSelection: [],
                tableData: [],
                currentPage: 1, //当前页
                pageSize: 100, //每页总数
                totalRecords: 0, //总条数
                keySearch: '',
                dialog: {
                    currentPage: 1,
                    pageSize: 100,
                    totalRecords: 0,
                    keySearch: '',
                    tableData: []
                },
                cancelSkuList: [],
                echo: [],
            }
        },
        computed: {
            tables() {
                var search = this.keySearch;
                if (search) {
                    return this.tableData.filter((data) => {
                        return Object.keys(data).some((key) => {
                            //搜索所有的内容
                            return String(data[key]).toLowerCase().indexOf(search) > -1;
                        })
                    })
                }
                return this.tableData;
            }
        },
        methods: {

            close() {
                this.keySearch = '';
                this.currentPage = 1;
                this.pageSize = 100;
                this.totalRecords = 0;
                this.dialogSKUVisible = false;
            },
            inputLimit: inputLimit,
            importSku() {
                this.dialogFormVisible = true;
                this.dialogAjaxFunction()
            },
            //点击事件获取输入内容
            dialogSearch: function () {
                this.dialogAjaxFunction()
            },
            SizeChange: function (val) {
                this.dialog.pageSize = val;
                this.dialogAjaxFunction()
            },
            currentChange: function (val) {
                this.dialog.currentPage = val;
                this.dialogAjaxFunction()
            },
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            handleEdit(index, row) {
                this.tableData[index].modify = "00";
                if (row.isAdd) {
                    this.tableData[index].opr = "00";
                } else {
                    this.tableData[index].opr = "02";
                }
            },
            handleCancel(index, row) {
                this.$confirm('是否确认下架?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData[index].modify = "00";
                    this.tableData[index].opr = "01";
                    this.tableData[index].disable = true;
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            handleDelete(index, row) {
                this.tableData.splice(index, 1);
            },
            checkOK() {
                this.dialogFormVisible = false;
                this.echo = this.compare(this.multipleSelection, this.tableData).onlySrc1;
                this.tableData = this.tableData.concat(this.echo);
                this.totalRecords = this.tableData.length;
            },
            checkCancel() {
                this.dialogFormVisible = false;
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                var select = JSON.parse(JSON.stringify(val));
                select.forEach((ele) => {
                    ele.sku_contract_price = 0;
                })

                this.multipleSelection = select;
            },
            submit() {
                if (this.chgSmyName == '') {
                    this.$message.error('价目表变更名称不能为空');
                    return false;
                }
                try {
                    this.tableData.forEach((ele) => {
                        if (ele.isAdd && ele.modify == '99') {
                            throw  '编号为【' + ele.sku_code + '】的变更信息不能为空';
                        }
                    })
                    this.loading = true;
                    let addJson = $.ajax({
                        url: '/tariffController/tablePriceChgSmyAdd.json',
                        type: 'post',
                        data: {
                            chgSmyCode: '',
                            chgSmyName: this.chgSmyName,
                            remark: this.remark,
                            tableprice_id: this.tariff.id,
                            obj: JSON.stringify(this.tableData),
                        },
                        dataType: 'json',
                        success: (result) => {
                            this.loading = false;
                            console.log(result)
                            if (result.ret) {
                                this.$message({
                                    message: "操作成功",
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    window.location.href = "/tariffController/list.page";
                                }, 1000);
                            } else {
                                this.$message.error('操作失败，请稍后重试');
                            }
                        },
                    });
                } catch (e) {
                    console.log(e);
                    this.$message.error(e);
                }
            },
            skuListFunction() {
                this.tableLoading = true;
                $.ajax({
                    url: '/tariffController/skuPriceTableDetailList.json',
                    type: 'get',
                    dataType: 'json',
                    data: {
                        id: this.tariff.id,
                        stat: "00",
                        page: 0,
                        limit: 0,
                    },
                    success: (result) => {
                        this.tableLoading = false;
                        if (result.ret) {
                            var table = result.data;
                            table.forEach((ele) => {
                                ele.isAdd = false;
                                ele.modify = "99";
                                ele.disable = false;
                            });
                            this.tableData = table;
                            this.totalRecords = result.count;
                        } else {
                            this.$message.error('请求异常');
                        }
                    }
                });
            },
            dialogAjaxFunction() {
                this.dialogLoading = true;
                $.ajax({
                    url: '/tariffController/skuPriceTableDetailList.json',
                    type: 'get',
                    dataType: 'json',
                    data: {
                        id: this.tariff.id,
                        stat: "01",
                        key: this.dialog.keySearch,
                        page: this.dialog.currentPage,
                        limit: this.dialog.pageSize,
                    },
                    success: (result) => {
                        this.dialogLoading = false;
                        if (result.ret) {
                            var table = result.data;
                            table.forEach((ele) => {
                                ele.isAdd = true;
                                ele.modify = "99";
                                ele.disable = false;
                            })
                            this.dialog.tableData = table;
                            this.dialog.totalRecords = result.count;
                        } else {
                            this.$message.error('请求异常');
                        }
                    }
                });
            },
            ajaxFunction() {
                $.ajax({
                    url: '/tariffController/skuPriceTableSummaryDetail.json?id=' + this.tariff.id,
                    type: 'get',
                    dataType: 'json',
                    success: (result) => {
                        if (result.ret) {
                            this.tariff.id = result.data.id;
                            this.tariff.code = result.data.code;
                            this.tariff.name = result.data.name;
                            this.skuListFunction();
                        } else {
                            this.$message.error('请求失败，请稍后重试');
                        }
                    }
                });
            },
            compare(src1, src2) {
                let arr1 = src1;
                let arr2 = src2;
                console.log();
                let searcher1 = {};
                let searcher2 = {};
                // 用arr组成索引
                arr1.forEach((ele, index) => {
                    searcher1[ele.sku_code] = index;
                });
                arr2.forEach((ele, index) => {
                    searcher2[ele.sku_code] = index;
                });

                // 过滤
                let samePart = arr2.filter(ele => {
                    const result = searcher1[ele.sku_code];
                    return result == undefined ? false : true;
                });
                let onlySrc2 = arr2.filter(ele => {
                    const result = searcher1[ele.sku_code];
                    return result == undefined ? true : false;
                });
                let onlySrc1 = arr1.filter(ele => {
                    const result = searcher2[ele.sku_code];
                    return result == undefined ? true : false;
                });

                return {
                    samePart,
                    onlySrc1,
                    onlySrc2
                };
            },
        },
        mounted() {
            this.tariff.id = '${id}';
            this.ajaxFunction();
        },
    })
</script>

</body>

</html>